<template>
  <HomePanel sub-title="国际经典 品质保证" title="热门品牌">
    <template #right>
      <a :class="{disabled: index === 0}"
         class="iconfont icon-angle-left prev"
         href="javascript:;"
         @click="toggle(-1)"></a>
      <a :class="{disabled: index === (brands.length / 5) - 1}"
         class="iconfont icon-angle-right next"
         href="javascript:;"
         @click="toggle(1)"></a>
    </template>


    <div style="position: relative;">
      <Transition name="fade">
        <template #default>
          <div ref="box" class="box">
            <ul v-if="brands.length" :style="style" class="list">
              <li v-for="item in brands" :key="item.id">
                <router-link to="/">
                  <img v-lazy="item.picture" alt="">
                </router-link>
              </li>
            </ul>

            <div class="skeleton">
              <XtxSkeleton v-for="i in 5"
                           :key="i" animated bg="#e4e4e4"
                           class="item"
                           height="305px"
                           width="240px">
              </XtxSkeleton>
            </div>
          </div>
        </template>
      </Transition>
    </div>
  </HomePanel>
</template>

<script>


import HomePanel from '@/components/home/HomePanel'
import { useLazyData } from '@/hooks'
import API from '@/api/home'
import { computed, onMounted, ref } from 'vue'
import XtxSkeleton from '@/components/library/XtxSkeleton'

export default {
  name: 'HomeBrand',
  components: {
    XtxSkeleton,
    HomePanel
  },
  setup() {
    // 获取数据
    const {
      result: brands,
      target: box
      // 注意: useLazyData需要的是API函数. 如果遇到要传参的情况下, 自己写函数, 在函数中调用API
    } = useLazyData(() => API.getHotBrand(10))

    const boxClientWidth = ref(0)
    // 注意:想要在 setup 中打印ref获取到的dom元素, 必须在 onMounted 生命周期函数里面
    onMounted(() => {
      boxClientWidth.value = box.value.clientWidth
    })
    // console.log(brands)

    // 切换效果, 前提只有两页 0 1, 这是因为只请求的品牌数只有10张
    const index = ref(0)
    // 1.点击上一页
    // 2.点击下一页
    const toggle = (step) => {
      const newIndex = index.value + step
      if (newIndex < 0 || newIndex > 1) {
        return
      }
      index.value = newIndex
    }

    // 使用transform: translateX来控制滑动
    const style = computed(() => {
      if (index.value === 0) {
        return `transform: translateX(-${boxClientWidth.value}px);`
      } else {
        return `transform: translateX(0);`
      }
    })

    // console.log(box.value.clientWidth)
    return {
      brands,
      box,
      index,
      toggle,
      style
    }
  }
}
</script>

<style lang="less" scoped>
.home-panel {
  background: #f5f5f5;

  .iconfont {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;

    color: #fff;
    background-color: @xtxColor;
    text-align: center;


    &::before {
      font-size: 12px;
      position: relative;
      top: -2px;
    }

    &.disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
  }

  .box {
    width: 100%;
    height: 345px;
    display: flex;
    overflow: hidden;
    padding-bottom: 40px;

    .list {
      width: 200%;
      display: flex;
      transition: all 1s;

      li {
        margin-right: 10px;
        width: 240px;

        &:nth-child(5n) {
          margin-right: 0;
        }

        img {
          width: 240px;
          height: 305px;
        }
      }

    }
  }

  .skeleton {
    width: 100%;
    display: flex;

    .item {
      margin-right: 10px;

      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
